<template>
  <div class="GykjMap-refuge">
    <div class="GykjMap-refuge-table">
      <table border class="table">
        <tbody>
          <tr>
              <td>名称</td>
              <td colspan="2">{{fliterData('name')}}</td>
              <td>镇街</td>
              <td colspan="2">{{fliterData('town')}}</td>
            </tr>
            <tr>
              <td>级别</td>
              <td colspan="2">{{fliterData('level')}}</td>
              <td>管理处</td>
              <td colspan="2">{{fliterData('manageby')}}</td>
            </tr>
            <tr>
              <td>地址</td>
              <td colspan="5">{{fliterData('address')}}</td>
            </tr>
            <tr>
              <td>面积（万㎡）</td>
              <td colspan="2">{{fliterData('area')}}</td>
              <td>可容纳人数（万人）</td>
              <td colspan="2">{{fliterData('accommodating_number')}}</td>
            </tr>
            <tr>
              <td>所属资源大类</td>
              <td colspan="2">{{fliterData('class')}}</td>
              <td>所属资源亚类</td>
              <td colspan="2">{{fliterData('subclass')}}</td>
            </tr>
            <tr>
              <td>所属资源细类</td>
              <td colspan="5">{{fliterData('minorclass')}}</td>
            </tr>
            <tr>
              <td>所属资源扩展类</td>
              <td colspan="2">{{fliterData('expandclass')}}</td>
              <td>密级</td>
              <td colspan="2">{{fliterData('address')}}</td>
            </tr>
            <tr>
              <td>基本情况</td>
              <td colspan="2">{{fliterData('situation')}}</td>
              <td>周边交通状况</td>
              <td colspan="2">{{fliterData('traffic')}}</td>
            </tr>
            <tr>
              <td>抗震设防烈度</td>
              <td colspan="2">{{fliterData('intensity')}}</td>
              <td>联系人电子邮箱</td>
              <td colspan="2">{{fliterData('contacts_email')}}</td>
            </tr>
            <tr>
              <td>投入使用时间</td>
              <td colspan="2">{{fliterData('startyear')}}</td>
              <td>设计使用年限</td>
              <td colspan="2">{{fliterData('design_age')}}</td>
            </tr>

            <tr>
              <td>值班电话</td>
              <td colspan="2">{{fliterData('onduty_telephone')}}</td>
              <td>传真</td>
              <td colspan="2">{{fliterData('fax')}}</td>
            </tr>
            <tr>
              <td>应急通信方式</td>
              <td colspan="2">{{fliterData('emergency_telephone')}}</td>
              <td>传真</td>
              <td colspan="2">{{fliterData('chargeby')}}</td>
            </tr>
            <tr>
              <td>主管单位</td>
              <td colspan="2">{{fliterData('governor')}}</td>
              <td>主管单位地址</td>
              <td colspan="2">{{fliterData('governor_address')}}</td>
            </tr>
            <tr>
              <td>相关预案</td>
              <td colspan="5">{{fliterData('planning')}}</td>
            </tr>
            <tr>
              <td>备注</td>
              <td colspan="5">{{fliterData('remark')}}</td>
            </tr>
            <tr>
              <td rowspan="2" colspan="2">负责人</td>
              <td>姓名</td>
              <td>办公电话</td>
              <td>移动电话</td>
              <td>住宅电话</td>
            </tr>
            <tr>
              <td>{{fliterData('chargeby')}}</td>
              <td>{{fliterData('offical_telephone')}}</td>
              <td>{{fliterData('offical_phone')}}</td>
              <td>{{fliterData('offical_homephone')}}</td>
            </tr>
            <tr>
              <td rowspan="2" colspan="2">联系人</td>
              <td>姓名</td>
              <td>办公电话</td>
              <td>移动电话</td>
              <td>住宅电话</td>
            </tr>
            <tr>
              <td>{{fliterData('contacts')}}</td>
              <td>{{fliterData('contacts_telephone')}}</td>
              <td>{{fliterData('contacts_phone')}}</td>
              <td>{{fliterData('contacts_homephone')}}</td>
            </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isInit: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {}
    }
  },
  methods: {
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    fliterDouData (key) {
      const arr = key.split('.')

      if (this.resultData[arr[0]] === undefined) {
        this.resultData[arr[0]] = {}
      }

      return this.resultData[arr[0]][arr[1]] || '--'
    },
    initData (data = {}) {
      this.resultData = data
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-refuge {
  overflow: auto;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 5px;
  .GykjMap-refuge-table {
    /*width: 100%;
    height: 100%;*/
    .table {
      width: 100%;
      font-size: 14px;
      border: 1px solid #ddd;
      td {
        padding: 5px;
      }
    }
  }
}
</style>
